import type { Directive } from 'vue'

import useUserStore from '@/store/user.js'

interface ElType extends HTMLElement {
  parentNode: any
}

const permissions: Directive = {
  mounted(el: ElType, binding, vnode) {
    const permissions = useUserStore().permissions
    const marksArr = binding.value || []
    let flag = false
    marksArr.forEach((mark: string) => {
      if (flag) {
        return
      }
      const [key1, key2, key3] = mark.split(':')
      if (key3) {
        flag = permissions[key1 + key2] && permissions[key1 + key2].findIndex((p: string) => p == key3) < 0
      } else {
        if (!permissions[key1 + key2]) {
          flag = true
        }
      }
    })
    if (flag && el) {
      if (el.parentNode) {
        el.parentNode.removeChild(el)
      } else {
        el.style.display = 'none'
      }
    }
  },
}
export default permissions
